<template>
  <ql-dialog
    :title="props.ruleId ? '编辑规则' : '添加规则'"
    :confirm="handleSubmit"
    @open="handleDialogOpen"
    @closed="handleDialogClosed"
  >
    <el-form
      ref="form"
      v-loading="formLoading"
      label-width="100px"
      :model="formData"
      :rules="formRules"
    >
      <el-row v-show="!props.ruleId">
        <el-col :span="24">
          <el-form-item
            label="类型："
            prop="type"
          >
            <el-radio-group
              v-model="formData.type"
              @change="radioChange"
            >
              <el-radio :value="1">
                菜单
              </el-radio>
              <el-radio :value="2">
                按钮
              </el-radio>
              <el-radio :value="3">
                路由
              </el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item
            label="名称："
            prop="name"
          >
            <el-input v-model="formData.name" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item
            label="排序："
            prop="orderNum"
          >
            <el-input-number
              v-model="formData.orderNum"
              :min="0"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row v-if="formData.type !== 2">
        <el-col :span="12">
          <el-form-item
            label="页面路由："
            prop="menuPath"
          >
            <el-input v-model="formData.menuPath" />
          </el-form-item>
        </el-col>
        <el-col
          v-if="formData.type === 1"
          :span="12"
        >
          <el-form-item
            label="图标："
            prop="icon"
          >
            <el-input v-model="formData.icon" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item
            label="前端权限："
            prop="perms"
          >
            <el-input
              v-model="formData.perms"
              :autosize="{ minRows: 2, maxRows: 4 }"
              type="textarea"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row v-else>
        <el-col :span="12">
          <el-form-item
            label="按钮规则："
            prop="btn"
          >
            <el-input v-model="formData.btn" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </ql-dialog>
</template>

<script setup>
import { menuInfo, menuSave, menuUpdate } from '@/api/setting/rule'

const props = defineProps({
  pid: {
    type: Number,
    default: null
  },
  ruleId: {
    type: Number,
    default: null
  }
})

const emit = defineEmits(['success', 'update:pid', 'update:rule-id'])

const formLoading = ref(false)

const formData = ref({
  parentId: 0,
  type: 1,
  name: '',
  orderNum: 0,
  menuPath: '',
  icon: '',
  perms: '',
  apiUrl: '',
  methods: ''
})

const formRules = reactive({
  name: [
    { message: '请输入名称', required: true, trigger: 'blur' }
  ],
  menuPath: [
    { message: '请输入页面路由', required: true, trigger: 'blur' }
  ],
  btn: [
    { message: '请输入按钮规则', required: true, trigger: 'blur' }
  ]
})

// 选择器切换置空数据
const radioChange = () => {
  Object.assign(formData.value, {
    menuPath: '',
    icon: '',
    perms: '',
    btn: ''
  })
}

// 打开
const handleDialogOpen = async () => {
  formLoading.value = true
  // 添加子规则
  formData.value.parentId = props.pid || 0
  await loadMenu().finally(() => {
    formLoading.value = false
  })
}

// 编辑子规则
const loadMenu = async () => {
  if (!props.ruleId) return
  const data = await menuInfo(props.ruleId)
  formData.value = data
}

// 保存
const form = ref(null)
const handleSubmit = async () => {
  const valid = await form.value?.validate()
  if (!valid) return
  if (props.ruleId) {
    await menuUpdate(formData.value)
  } else {
    await menuSave(formData.value)
  }
  emit('success')
  ElMessage.success('保存成功')
}

// 关闭
const handleDialogClosed = () => {
  emit('update:pid', null)
  emit('update:rule-id', null)
  form.value?.resetFields() // 清除表单数据
}

</script>

<style scoped lang='scss'></style>
